@import "../../sassmixins/mixins";

@function px2em($px, $base-font-size: 64px) {
  @return $px / $base-font-size * 1em;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background-image: url("../image/bg.jpg");
  background-size: 100% 100%;
}

.container {
  font-size: 1rem;
  padding-top: px2em(56px);
  padding-bottom: px2em(18px);
  @include center-block;
  width: 10rem;

  .pan-outer {
    @include size(10em, px2em(700px));
    background-image: url("../image/pan-outer.png");
    background-size: 100% 100%;
    font-size: 1em;
    position: relative;
    .pan-inner {
      @include size(px2em(505px), px2em(505px));
      background-image: url("../image/pan-inner.png");
      background-size: 100% 100%;
      position: relative;
      top: px2em(165px);
      left: px2em(68px);
    }

    .zhizhen {
      position: absolute;
      @include size(px2em(193px), px2em(254px));
      background-image: url("../image/zhizhen.png");
      background-size: 100% 100%;
      top: px2em(256px);
      left: px2em(226px);
    }
  }

  .word {
    @include size(10em, px2em(134px));
    background-image: url("../image/word.png");
    background-size: 100% 100%;
    margin-top: 22px;
  }

  .btn-area {
    margin-top: px2em(25px);
    height: px2em(66px);
    font-size: 1em;
    position: relative;

    .back {
      @include size(px2em(92px), px2em(59px));
      background-image: url("../image/back.png");
      background-size: 100% 100%;
      position: absolute;
      bottom: 0;
      right: px2em(272px);
    }
  }
}